<template>
  <div class="contianer">
    <div :class="userBaseSetUp.communityOpenUserList == 1 ? 'mess2' : 'mess'" ref="mess">
      <!-- 菜单弹出框 -->
      <vue-context-menu
        :contextMenuData="contextMenuData"
        @delete="deleteComment"
      ></vue-context-menu>
      <vue-context-menu
        :contextMenuData="userMenuData"
        @callOne="callOne"
      ></vue-context-menu>
      <!--  -->
      <div :class="userBaseSetUp.communityOpenUserList == 1 ? 'messDiv2' : 'messDiv'">
        <table
          class="messTable"
          style="width: 60%"
          v-for="(item, index) in communitys"
          :key="item.id + '' + index"
        >
          <tr>
            <div
              v-if="isCommunitysCreatedTime(index, communitys)"
              style="text-align: center; margin-top: 30px"
            >
              <span
                class="text"
                style="border-radius: 1px; padding-left: 3px; padding-right: 3px"
                >{{ communitysCreatedTime(communitys[index]) }}</span
              >
            </div>
          </tr>
          <tr>
            <td>
              <div class="commentMess">
                <!-- 头像 -->
                <div
                  @contextmenu="userMenu(item.uid)"
                  @mousedown="lookUserMenu(item.uid, $event)"
                  :class="
                    item.uid == MyCommentSend.uid
                      ? 'commontImg rigthText'
                      : 'commontImg leftText'
                  "
                >
                  <span>{{ item.nickName }}</span>
                  <el-image
                    :src="item.avatar ? item.avatar : squareUrl"
                    style="pointer-events: none"
                  ></el-image>
                </div>
                <!-- 文本 -->
                <div
                  v-if="item.type == 0"
                  @contextmenu="showMenu(item.id, item.uid)"
                  :class="
                    item.uid === MyCommentSend.uid
                      ? 'commontText rigthText'
                      : 'commontText leftText'
                  "
                >
                  <span class="text">{{ item.content }}</span>
                </div>
                <!-- 图片 -->
                <div
                  @contextmenu="showMenu(item.id, item.uid)"
                  v-if="item.type == 1"
                  :class="item.uid === MyCommentSend.uid ? 'rigthImg' : ' leftImg'"
                  style="width: 100px; object-fit: contain"
                >
                  <el-image
                    style="object-fit: contain"
                    :src="item.content"
                    :preview-src-list="[item.content]"
                  >
                  </el-image>
                </div>
                <!-- 文件 -->
                <div
                  @contextmenu="showMenu(item.id, item.uid)"
                  v-if="item.type == 2"
                  :class="item.uid === MyCommentSend.uid ? ' rigthText' : ' leftText'"
                >
                  <!-- <span class="text">{{ item.fileName }}</span> -->
                  <el-button
                    style="background-color: rgb(239, 182, 132); width: 170px"
                    @click="uploadFile(item.content)"
                  >
                    <p class="el-icon-folder-opened"></p>
                    :{{ fileName(item.fileName) }}
                  </el-button>
                </div>
                <!-- 撤回消息 -->
                <div v-if="item.type == -1" style="text-align: center">
                  <span
                    class="text"
                    style="
                      background-color: #cccccc;
                      border-radius: 1px;
                      padding-left: 3px;
                      padding-right: 3px;
                    "
                    >该消息已撤回</span
                  >
                </div>
                <!-- 管理员撤回 -->
                <div v-if="item.type == -2" style="text-align: center">
                  <span
                    class="text"
                    style="
                      background-color: #cccccc;
                      border-radius: 1px;
                      padding-left: 3px;
                      padding-right: 3px;
                    "
                    >该消息存在违规信息，已被管理员撤回</span
                  >
                </div>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>

    <div class="usetListDiv" v-if="userBaseSetUp.communityOpenUserList">
      <div class="communitysInformation">
        <el-table
          height="550"
          :default-sort="{ prop: 'speakNum', order: 'descending' }"
          :data="
            allUserList.filter(
              (data) =>
                !search || data.nickName.toLowerCase().includes(search.toLowerCase())
            )
          "
          style="width: 100%"
        >
          <el-table-column prop="date" width="40">
            <template slot-scope="scope">
              <el-image
                :src="scope.row.avatar"
                class="tableImg"
                v-if="scope.row.avatar"
              ></el-image>
              <div class="tableNoImg el-icon-picture-outline" v-else></div>
            </template>
          </el-table-column>
          <el-table-column prop="nickName">
            <template slot="header" slot-scope="scope">
              <el-button type="success" @click="userUpdateUserList"
                ><span class="el-icon-refresh"></span>刷新</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="活跃度" prop="speakNum" width="100" sortable>
          </el-table-column>
          <el-table-column align="right" width="150">
            <template slot="header" slot-scope="scope">
              <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
            </template>
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="lookUserMenu(scope.row.id, $event)"
                v-if="!scope.row.ban"
                type="info"
                plain
                >查看信息</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div :class="userBaseSetUp.communityOpenUserList == 1 ? 'sendCount2' : 'sendCount'">
      <el-popover placement="top" width="500" trigger="click" class="popover">
        <div class="imgUpload">
          <el-upload
            class="upload-demo"
            ref="upload"
            action="api/util/uploadImg"
            name="imgFile"
            :headers="uploadHeaders"
            :before-upload="beforeUpload"
            :on-success="onSuccess"
            :on-preview="handlePreview"
            :before-remove="handleRemove"
            :file-list="fileList"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small" type="primary">选取图片</el-button>
            <el-button
              style="margin-left: 10px"
              size="small"
              type="success"
              @click="submitUpload"
              >发送</el-button
            >
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10M</div>
          </el-upload>
        </div>
        <el-button slot="reference" style="background-color: rgb(104, 181, 244)"
          >图片</el-button
        >
      </el-popover>

      <el-popover
        placement="top"
        width="500"
        trigger="click"
        class="popover"
        v-if="myUserType != 0"
      >
        <div class="imgUpload">
          <el-upload
            class="upload-demo"
            ref="uploadFile"
            action="api/util/uploadFile"
            name="uploadFile"
            :headers="uploadHeaders"
            :before-upload="fileBeforeUpload"
            :on-success="onSuccessFile"
            :on-preview="handlePreview"
            :before-remove="handleRemoveFile"
            :file-list="fileList"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button
              style="margin-left: 10px"
              size="small"
              type="success"
              @click="submitUploadFile"
              >发送</el-button
            >
            <div slot="tip" class="el-upload__tip">
              上传的格式全转化为文件，大小不能超过1G
            </div>
          </el-upload>
        </div>
        <el-button slot="reference" style="background-color: rgb(254, 206, 74)"
          >文件</el-button
        >
      </el-popover>

      <el-input
        v-model="MyCommentSend.content"
        placeholder="域名已备案，希望大家文明发言，免除我被封号的风险..."
        class="sendInput"
        @keyup.enter.native="sendInput"
      ></el-input>
      <el-button type="primary" @click="sendInput">发送</el-button>
      <!-- <el-button type="warning" @click="userUpdateUserList" plain v-if="myUserType != 0">刷新列表</el-button> -->

      <el-button
        type="info"
        @click="userGetAllCommunity"
        plain
        v-if="userBaseSetUp.communityUpdateAutomatic == 0"
        ><span class="el-icon-refresh"></span
      ></el-button>
      <el-button type="info" @click="openSetUpBtn"
        ><span class="el-icon-s-tools"></span
      ></el-button>
    </div>

    <!-- 弹出的页面内容 -->
    <el-dialog :visible.sync="openSetUp" :width="'800px'">
      <div slot="title" class="header-title">
        <span class="title-name">
          <i class="el-icon-s-tools" style="margin-right: 10px"></i>
        </span>
        <span class="title-age">社区设置</span>
      </div>
      <div class="setUp">
        <div class="block">
          <span class="demonstration"
            >每次刷新显示条数:{{ updateUserBaseSetUp.communityTotal }}</span
          >
          <span
            class="demonstration setUpPrompt"
            v-if="updateUserBaseSetUp.communityTotal >= 30"
            >注意!显示条数过高会造成卡顿</span
          >
          <el-slider
            v-model="updateUserBaseSetUp.communityTotal"
            :step="10"
            :max="50"
            show-stops
          >
          </el-slider>
        </div>

        <div class="setUpInterval">
          <span class="demonstration" style="">数据更新方式</span><br />
          <el-radio-group
            v-model="updateUserBaseSetUp.communityUpdateAutomatic"
            style="margin-top: 15px"
          >
            <el-radio-button :label="1">自动</el-radio-button>
            <el-radio-button :label="0">手动</el-radio-button>
          </el-radio-group>
        </div>

        <div
          class="block setUpInterval"
          v-if="updateUserBaseSetUp.communityUpdateAutomatic == 1"
        >
          <span class="demonstration"
            >自动刷新时间间隔:{{ updateUserBaseSetUp.communityUpdateTime }}(秒)</span
          >
          <span
            class="demonstration setUpPrompt"
            v-if="updateUserBaseSetUp.communityUpdateTime <= 5"
            >注意!刷新频率过高会造成卡顿</span
          >
          <el-slider
            v-model="updateUserBaseSetUp.communityUpdateTime"
            :step="1"
            :min="3"
            :max="10"
            show-stops
          >
          </el-slider>
        </div>

        <div class="setUpInterval">
          <span class="demonstration" style="">是否加载成员列表</span><br />
          <el-radio-group
            v-model="updateUserBaseSetUp.communityOpenUserList"
            style="margin-top: 15px"
          >
            <el-radio-button :label="1">加载</el-radio-button>
            <el-radio-button :label="0">不加载</el-radio-button>
          </el-radio-group>
        </div>

        <div class="setUpInterval" style="margin-left: 70%">
          <el-button type="info" @click="openSetUp = false">取消</el-button>
          <el-button type="danger" @click="sureUpdateSetUp">确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import _myContent from "../../../public/js/global_variable";
import { $findMyCommunitySetUp } from "@/assets/api/user.js";
import { $updateByCommunitySetUp } from "@/assets/api/user.js";
import { $findAllCommunityFirst } from "@/assets/api/user.js";
import { $findAllCommunity } from "@/assets/api/user.js";
import { $addCommunity } from "@/assets/api/user.js";
import { $deleteCommunityById } from "@/assets/api/user.js";
import { $findAccountPublicById } from "@/assets/api/user.js";
import { $communityUserMess } from "@/assets/api/user.js";
export default {
  name: "App",
  data() {
    return {
      uploadHeaders: { token: JSON.parse(sessionStorage.getItem("token")) }, //文件上传token请求
      userBaseSetUp: {
        //用户基础设置
        communityTotal: 10, //页面请求数
        communityUpdateTime: 7, //修改的时间间隔
        communityOpenUserList: 0, //是否打开用户列表
        communityUpdateAutomatic: 1, //是否为自动更新
      },
      updateUserBaseSetUp: {
        communityTotal: 10, //页面请求数
        communityUpdateTime: 7, //修改的时间间隔
        communityOpenUserList: 0, //是否打开用户列表
        communityUpdateAutomatic: 1, //是否为自动更新
      },
      openSetUp: false, //用户色设置界面
      startId: 10, //页面请求起点id
      search: "",
      allUserList: [], //所有用户的列表
      squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      myUserType: this.$myContent.userMess.userType,
      contextMenuData: {
        menuName: "demo",
        axis: {
          x: null,
          y: null,
        },
        // Menu options (菜单选项)
        menulists: [
          {
            fnHandler: "delete", // Binding events(绑定事件)
            // icoName: "el-icon-delete-solid", // icon (icon图标 )
            btnName: "撤回", // The name of the menu option (菜单名称)
          },
        ],
      },
      userMenuData: {
        menuName: "@user",
        axis: {
          x: null,
          y: null,
        },
        menulists: [
          {
            fnHandler: "callOne", // Binding events(绑定事件)
            icoName: "fa fa-home fa-fw", // icon (icon图标 )
            btnName: "@", // The name of the menu option (菜单名称)
          },
        ],
      },
      fileList: [],
      communitys: [],
      content: "",
      MyCommentSend: {
        uid: JSON.parse(sessionStorage.getItem("uid")),
        content: "",
        type: "",
        avatar: this.$myContent.userMess.avatar,
        fileName: "",
      },
      isFileTypeError: false, //是否是人为删除已经删上传的文件
      nowScrollHeight: 0, //当前信息框的信息总长度，用来判断是否要将下拉条重置到最下面
      commentOperateId: "",
      commentOperateUId: "",
      lookOneUserMess: {
        nickName: "@",
      },
      visible: false,
      communityRenew: null, //自动更新定时器
    };
  },
  created() {
    this.userSetUp();
  },
  // mounted() {
  //   //页面挂载完成时调用
  //   // this.scrollToBottom()
  //   //this.userSetUp();
  // },
  mounted() {
    // WebSocket
    if ("WebSocket" in window) {
      this.websocket = new WebSocket("ws://localhost:8808/push/websocket");
      // alert('连接浏览器')
      this.initWebSocket();
    } else {
      alert("当前浏览器 不支持");
    }
  },
  beforeDestroy() {
    this.onbeforeunload();
  },

  updated() {
    //页面更新后调用
    this.MyCommentSend.avatar = this.$myContent.userMess.avatar;
    this.myUserType = this.$myContent.userMess.userType;
    this.scrollToBottom();
  },
  methods: {
    initWebSocket() {
      // 连接错误
      this.websocket.onerror = this.setErrorMessage;

      // 连接成功
      this.websocket.onopen = this.setOnopenMessage;

      // 收到消息的回调
      this.websocket.onmessage = this.setOnmessageMessage;

      // 连接关闭的回调
      this.websocket.onclose = this.setOncloseMessage;

      // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
      window.onbeforeunload = this.onbeforeunload;
    },
    setErrorMessage() {
      console.log("WebSocket连接发生错误   状态码：" + this.websocket.readyState);
    },
    setOnopenMessage() {
      console.log("WebSocket连接成功    状态码：" + this.websocket.readyState);
    },
    setOnmessageMessage(event) {
      // 根据服务器推送的消息做自己的业务处理
      console.log("服务端返回：" + event.data);
    },
    setOncloseMessage() {
      console.log("WebSocket连接关闭    状态码：" + this.websocket.readyState);
    },
    onbeforeunload() {
      this.closeWebSocket();
    },
    closeWebSocket() {
      this.websocket.close();
    },

    //用户基础设置
    async userSetUp() {
      this.myUserType = this.$myContent.userMess.userType;
      await $findMyCommunitySetUp(this.MyCommentSend.uid)
        .then((res) => {
          if (res.data.success) {
            this.userBaseSetUp = res.data.data.findAllCommunity;
            this.getAllCommunity();
            if (this.userBaseSetUp.communityOpenUserList == 1) {
              this.getCommunityUserMess();
            }
            this.AutomaticUpdate();
          } else {
            this.message(res);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //用户设置界面打开
    openSetUpBtn() {
      this.openSetUp = true;
      //修改数据初始化
      $findMyCommunitySetUp(this.MyCommentSend.uid)
        .then((res) => {
          if (res.data.success) {
            this.updateUserBaseSetUp = res.data.data.findAllCommunity;
          } else {
            this.message(res);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //确认信息修改
    sureUpdateSetUp() {
      this.$confirm("是否确认修改当前设置?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.openSetUp = false;
          (this.updateUserBaseSetUp.uid = this.MyCommentSend.uid),
            $updateByCommunitySetUp(this.updateUserBaseSetUp)
              .then((res) => {
                this.message(res);
                if (res.data.success) {
                  location.reload();
                }
              })
              .catch(() => {
                console.log(err);
              });
        })
        .catch(() => {});
    },

    //刷新请求社区讨论信息
    getAllCommunity() {
      //console.log("thisTotal = " + this.userBaseSetUp.communityTotal);
      $findAllCommunityFirst(this.userBaseSetUp.communityTotal)
        .then((res) => {
          if (res.data.success) {
            this.communitys = res.data.data.findAllCommunity;
            this.startId = this.communitys[this.userBaseSetUp.communityTotal - 1].id;
            //初始化请求，将数据保存到session中
            sessionStorage.setItem(
              "allCommunity",
              JSON.stringify(res.data.data.findAllCommunity)
            );
          } else {
            this.$message({
              type: "error",
              message: "请检查网络",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //用户手动刷新请求社区讨论信息
    userGetAllCommunity() {
      $findAllCommunityFirst(this.userBaseSetUp.communityTotal)
        .then((res) => {
          if (res.data.success) {
            this.communitys = res.data.data.findAllCommunity;
            this.startId = this.communitys[this.userBaseSetUp.communityTotal - 1].id;
            //初始化请求，将数据保存到session中
            sessionStorage.setItem(
              "allCommunity",
              JSON.stringify(res.data.data.findAllCommunity)
            );
            this.message(res);
          } else {
            this.$message({
              type: "error",
              message: "请检查网络",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //自动请求社区讨论信息
    automaticGetAllCommunity() {
      $findAllCommunity(this.startId, this.userBaseSetUp.communityTotal)
        .then((res) => {
          if (res.data.success) {
            var communityLength = res.data.data.findAllCommunity.length;
            for (var i = 0; i < communityLength; i++) {
              this.communitys.splice(0, 1);
              this.communitys.push(res.data.data.findAllCommunity[i]);
            }
            // console.log( this.communitys);
            this.startId = this.communitys[this.userBaseSetUp.communityTotal - 1].id; //更新请求数据
          } else {
            this.$message({
              type: "error",
              message: "请检查网络",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //发送信息
    sendInput() {
      if (this.MyCommentSend.content == "") {
        this.$message({
          type: "warning",
          message: "输入内容不能为空",
        });
        return;
      }
      this.MyCommentSend.type = 0;
      $addCommunity(this.MyCommentSend)
        .then((res) => {
          if (res.data.success) {
            this.automaticGetAllCommunity();
          } else {
            this.message(res);
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.MyCommentSend.content = "";
    },

    //自动更新
    AutomaticUpdate() {
      var n = 0;
      if (this.communityRenew) {
        window.clearInterval(this.communityRenew);
        this.communityRenew = null;
      }
      if (this.userBaseSetUp.communityUpdateAutomatic == 1) {
        //用户设置是否为自动刷新
        this.communityRenew = setInterval(() => {
          if (this.userBaseSetUp.communityUpdateAutomatic == 1) {
            //用户设置是否为自动刷新
            n++;
            if (n == 5) {
              setTimeout(() => {
                n = 0;
                this.getAllCommunity();
              }, 0);
            } else {
              setTimeout(() => {
                this.automaticGetAllCommunity();
              }, 0);
            }
          } else {
            window.clearInterval(this.communityRenew);
          }
        }, this.userBaseSetUp.communityUpdateTime * 1000);
        this.$once("hook:beforeDestroy", () => {
          window.clearInterval(this.communityRenew);
        });
      }
    },

    //更新社区用户列表
    getCommunityUserMess() {
      $communityUserMess()
        .then((res) => {
          if (res.data.success) {
            this.allUserList = res.data.data.communityUserMess;
          } else {
            this.message(res);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    userUpdateUserList() {
      $communityUserMess().then((res) => {
        if (res.data.success) {
          this.allUserList = res.data.data.communityUserMess;
          this.$message({
            type: "success",
            message: "成功更新",
          });
        } else {
          this.$message({
            type: "error",
            message: "网咯异常",
          });
        }
      });
    },

    handleEdit(index, row) {
      if (row.ban) {
        this.$confirm("是否解除昵称为'" + row.nickName + "'用户的禁言?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$axios
              .get("api/admin/wqunCommunityBan/deleteBan/" + row.id)
              .then((res) => {
                this.$message({
                  type: res.data.success ? "success" : "error",
                  message: res.data.message,
                });
                if (res.data.success) {
                  this.getCommunityUserMess();
                }
              });
          })
          .catch(() => {});
      } else {
        this.$confirm("是否禁言昵称为'" + row.nickName + "'的用户?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$axios.get("api/admin/wqunCommunityBan/addBan/" + row.id).then((res) => {
              this.$message({
                type: res.data.success ? "success" : "error",
                message: res.data.message,
              });
              if (res.data.success) {
                this.getCommunityUserMess();
              }
            });
          })
          .catch(() => {});
      }
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    communitysCreatedTime(index) {
      return index.createdTime;
    },
    isCommunitysCreatedTime(index, communitys) {
      if (index == 0) {
        return true;
      } else {
        var thisTime = communitys[index].createdTime;
        var preTime = communitys[index - 1].createdTime;
        let thisDate = new Date(thisTime);
        let preTDate = new Date(preTime);
        const diff = thisDate.getTime() - preTDate.getTime();
        if (diff / (1000 * 60 * 30) >= 1) {
          return true;
        } else {
          false;
        }
      }
    },
    fileName(name) {
      if (name.length > 10) {
        var end = name.lastIndexOf(".");
        var fileName = name.substr(0, 5);
        var typeName = name.substr(end);
        name = fileName + "..." + typeName;
      }

      return name;
    },
    deleteComment() {
      $deleteCommunityById(this.commentOperateId, this.commentOperateUId).then((res) => {
        this.message(res);
        this.getAllCommunity();
      });
    },
    showMenu(id, uid) {
      if (uid != this.MyCommentSend.uid && this.myUserType == 0) {
        return;
      }
      this.commentOperateId = id;
      this.commentOperateUId = uid;
      event.preventDefault();
      var x = event.clientX;
      var y = event.clientY;
      // Get the current location
      this.contextMenuData.axis = {
        x,
        y,
      };
    },
    callOne() {
      this.MyCommentSend.content = "@" + this.lookOneUserMess.nickName;
    },

    lookUserMenu(uid, event) {
      if (event.button == 0) {
        sessionStorage.setItem("lookUserMessById", uid);
        this.$router.push({
          name: "publicBaseMess",
        });
      }
    },
    userMenu(uid) {
      $findAccountPublicById(uid)
        .then((res) => {
          if (res.data.success) {
            this.lookOneUserMess = res.data.data.findAccountPublicById;
          }
        })
        .catch((err) => {
          console.log(err);
        });
      event.preventDefault();
      var x = event.clientX - 10;
      var y = event.clientY;
      // Get the current location
      this.userMenuData.axis = {
        x,
        y,
      };
    },
    test(id, event) {
      if (event.button == 0) {
        alert("你点了左键" + id);
      } else if (event.button == 2) {
        alert("你点了右键" + id);
      }
    },
    uploadFile(url) {
      window.location.href = url;
    },
    beforeUpload(file) {
      if (file.type != "image/jpeg" && file.type != "image/png") {
        this.$message({
          type: "warning",
          message: "文件格式有误，请发送jpg或png格式的图片",
        });
        this.isFileTypeError = true;
        return false;
      }
    },
    submitUpload() {
      this.$refs.upload.submit();
    },

    submitUploadFile() {
      this.$refs.uploadFile.submit();
    },
    handleRemove(file, fileList) {
      if (!this.isFileTypeError) {
      } else {
        this.isFileTypeError = false;
      }
    },

    handleRemoveFile(file, fileList) {
      if (!this.isFileTypeError) {
      } else {
        this.isFileTypeError = false;
      }
    },
    onSuccessFile(response, file, fileList) {
      if (response.success) {
        this.MyCommentSend.type = 2;
        this.MyCommentSend.content = response.data.resPath;
        $addCommunity(this.MyCommentSend)
          .then((res) => {
            if (res.data.success) {
              this.getAllCommunity();
              this.MyCommentSend.content = "";
              this.fileList = [];
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$message({
          type: "error",
          message: response.message,
        });
        return false;
      }
    },
    fileBeforeUpload(file) {
      console.log(file);
      this.MyCommentSend.fileName = file.name;
    },
    onSuccess(response, file, fileList) {
      if (response.success) {
        this.MyCommentSend.type = 1;
        this.MyCommentSend.content = response.data.resPath;
        $addCommunity(this.MyCommentSend)
          .then((res) => {
            if (res.data.success) {
              this.getAllCommunity();
              this.MyCommentSend.content = "";
              this.fileList = [];
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$message({
          type: "error",
          message: response.message,
        });
        return false;
      }
    },
    handlePreview(file) {},
    scrollToBottom() {
      let mess = this.$refs.mess; //通过$refs获取到该元素
      if (this.nowScrollHeight === mess.scrollHeight) {
        return;
      } else if (
        mess.scrollTop >= mess.scrollHeight - 1000 &&
        this.nowScrollHeight != 0
      ) {
        return;
      }
      mess.scrollTop = mess.scrollHeight;
      this.nowScrollHeight = mess.scrollHeight;
    },
  },
};
</script>

<style scoped>
@media screen and (max-width: 800px) {
  .usetListDiv {
    display: none;
  }
}

.mess {
  height: 95%;
  min-height: 400px;
  overflow-y: auto;
  padding: 10px;
  min-width: 500px;
}

.mess2 {
  display: inline-block;
  height: 95%;
  width: 70%;
  min-height: 400px;

  overflow-y: auto;
  min-width: 300px;
}

.usetListDiv {
  width: 28%;
  float: right;
  margin-right: 0%;
}

.messDiv {
  margin: 0 auto;
  width: 70%;
  border-left: solid 1px #cccccc;
  border-right: solid 1px #cccccc;
}

.messDiv2 {
  margin: 0 auto;
  width: 99%;
  float: left;
  border-left: solid 1px #cccccc;
  border-right: solid 1px #cccccc;
}

.setUpInterval {
  margin-top: 30px;
}

.setUpPrompt {
  color: rgb(230, 162, 60);
  float: right;
}

.setUp {
  padding: 70px;
  padding-top: 30px;
  padding-bottom: 10px;
}

.communitysInformation {
  height: 100%;
}

.left {
  float: left;
}

.popover {
  margin-left: 3px;
}

.leftImg {
  float: left;
}

.rigthImg {
  float: right;
}

.imgUpload {
  border: solid 1px #cccccc;
  padding: 5px;
}

.upload-demo {
  margin: 0 auto;
  margin-left: 150px;
}

.contianer {
  padding: 20px;
  height: 87%;
  min-height: 550px;
}

.sendCount {
  margin-left: 17%;
  margin-top: 20px;
  height: 40px;
  line-height: 30px;
}

.sendCount2 {
  margin-left: 1%;
  margin-top: 20px;
  height: 40px;
  line-height: 30px;
}

.commentMess {
  margin-top: 15px;
}

.leftText {
  float: left;
  background-color: #bce9ea;
}

.rigthText {
  float: right;
  background-color: #47dfe1;
}

.commontText {
  max-width: 60%;
  min-height: 20px;
  border-radius: 10px;
  padding: 10px;

  .text {
    line-height: 20px;
    top: 8px;
    margin-left: 10px;
    margin-right: 10px;
  }
}

.messTable {
  margin: 0 auto;
  min-width: 90%;
}

.commontImg {
  height: 40px;
  width: 40px;
  margin-left: 5px;
  margin-right: 5px;
}

tr {
}

.sendInput {
  width: 40%;
  margin-right: 10px;
}

div::-webkit-scrollbar {
  width: 6px;
}

div::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}

div::-webkit-scrollbar-thumb {
  background: #47dfe1;
  border-radius: 10px;
}

div::-webkit-scrollbar-thumb:hover {
  background: #47dfe1;
}
</style>
